<script setup>
import oldMaps from 'src/utils/oldmap.json'

const isMobile = window.matchMedia('(pointer:coarse)').matches
defineEmits(['openImage'])
</script>

<template>
  <div class="row flex-center full-height bg-amber-1">
    <div class="col-lg-8 q-px-md q-py-xl">
      <div class="q-mx-lg q-mb-md" style="font-size: 3em; font-family: SourceHanSerifCN-Heavy, serif; color:#1f5354">古旧地图</div>
      <div class="row relative-position">
        <div v-for="(map, i) of oldMaps" :key="i" class="col-lg-4 col-6 q-px-lg q-py-md cursor-pointer" @click="$emit('openImage', map)">
          <q-responsive :ratio="4/3">
            <q-img class="col" :src="map.src + '?x-oss-process=style/size-s'" />
          </q-responsive>
          <div class="text-teal-10 q-pt-sm text-center" :style="{ fontSize: isMobile ? '14px' : '17px' }">{{ map.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
